<template>
  <view class="trade-all-wrap bg-theme">
    <ex-table class="ex-table" v-if="!isEmpty">
      <ex-tr class="ex-tr">
        <ex-th class="ex-th">{{ $t("buyIndex.labels[0]") }}</ex-th>
        <ex-th class="ex-th" v-if="showTrend">{{
          $t("trendChart.labels[0]")
        }}</ex-th>
        <ex-th class="ex-th">{{ $t("buyIndex.labels[1]") }}</ex-th>
        <ex-th class="ex-th"> {{ $t("buyIndex.labels[2]") }}</ex-th>
      </ex-tr>
      <ex-tr
        calss="ex-tr"
        :borderBottom="true"
        v-for="(item, index) in list"
        @onClick="onLineClick(item)"
        :key="item.id"
      >
        <ex-td class="ex-td td-first">
          <view>
            <view class="td-line-1">
              {{ item.base_currency_code }}
              <span>/{{ item.quote_currency_code }}</span>
            </view>
            <view class="td-line-2">
              {{ $t('tradeDetail.labels[2]') }} (24H) {{ item.currency_quotation.amount }}
            </view>
          </view>
        </ex-td>
        <ex-td v-if="showTrend">
          <view class="td-wrap">
            <home-chart
              :list="item.trendChart"
              lineType="area"
              lineWidth="2"
              :elemId="item.id"
              :isUp="item.currency_quotation.change > 0"
            ></home-chart>
          </view>
        </ex-td>
        <ex-td class="ex-td price">
          <view>
            <text>
              {{ getPrice(item.currency_quotation.close) }}
            </text>
          </view>
        </ex-td>
        <ex-td>
          <ex-label :type="getLabelType(item)">
            {{ startsWith(item.currency_quotation.change) ? "" : "+" }}
            {{ item.currency_quotation.change }}%
          </ex-label>
        </ex-td>
      </ex-tr>
    </ex-table>
    <view v-else>
      <ex-empty></ex-empty>
    </view>
  </view>
</template>

<script>
import ExTable from "@/components/ExTables/ExTable";
import ExTh from "@/components/ExTables/ExTh";
import ExTr from "@/components/ExTables/ExTr";
import ExTd from "@/components/ExTables/ExTd";
import ExLabel from "@/components/basic/ExLabel";
import HomeChart from "@/components/home/homeChart";
import { priceToFixed } from "@/utils/math.js";

export default {
  components: { ExTable, ExTh, ExTr, ExTd, ExLabel, HomeChart },
  name: "TradeAll",
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    showTrend: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      path: {
        kline: "/pages/trade/kline",
        otcTrade: "/pages/trade/otc",
        detail: "/pages/trade/detail",
        buy: "/pages/trade/buy",
      },
    };
  },
  computed: {
    isEmpty() {
      return this.$u.test.isEmpty(this.list);
    },
  },
  mounted() {},
  methods: {
    onLineClick(item) {
      const params = {
        symbol: item.symbol,
        matches_id: item.id,
      };
      this.navTo(this.path.kline, params);
    },
    getImage(item) {
      return this.$config.img_url + item.base_currency?.logo;
    },
    startsWith(s) {
      return s.startsWith("-");
    },
    getPrice(price) {
      return priceToFixed(price);
    },
    getLabelType(item) {
      let value = item.currency_quotation.change;
      if (value.startsWith("-")) {
        return "danger";
      }
      value = parseFloat(value);
      if (value > 0) {
        return "pass";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.trade-all-wrap {
  padding-bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  font-family: DIN-Medium;
  line-height: 1.2;
  .td-line-1 {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    margin-bottom: 10rpx;
    color: var(--text-color);
    span {
      font-size: 22rpx;
      color: #868686;
      margin-left: 10rpx;
    }
  }
  .ex-tr > * {
    &:first-child {}
  }
  .ex-td {
    font-weight: normal;
    &.price {
      font-size: 26rpx;
    }
  }
  .td-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ex-td-change {
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .td-line-2 {
    font-size: 26rpx;
    color: #8e8d92;
  }
  .td-first {
    display: flex;
    align-items: center;
  }
  .logo-image-wrap {
    flex-shrink: 0;
    margin-right: 10rpx;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 52rpx;
    height: 52rpx;
    border: 4rpx solid #bbbbbb;
    box-sizing: border-box;
    .logo-image {
      border-radius: 50%;
      width: 36rpx;
      height: 36rpx;
    }
  }
}

/deep/ .u-scroll-box {
  border-bottom: 1px solid #F6F6F6;
}
</style>
